* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}
.layout {
  width: 100%;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  overflow-y: auto;
  height: 100%;
  background-color: rgb(204, 199, 199);
  position: relative;
  /* 头部 */
  header {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    position: fixed;
    font-size: 0.3rem;
    line-height: 0.8rem;
    height: 0.8rem;
    background-color: red;
    z-index: 999;
    a {
      position: absolute;
      left: 0;
      padding: 0 0.2rem;
      color: white;
    }
    text-align: center;
    color: white;
  }
  /* 内容 */
  .content {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    position: relative;
    // overflow-y: auto;
    // overflow: hidden;
    background-color: #ccc;
    padding: 0.8rem 0;
    nav {
      width: 100%;
      text-align: center;
      position: relative;
      min-width: 320px;
      max-width: 640px;
      .tu{
        width: 100%;
        text-align: center;
        position: relative;
        min-width: 320px;
        max-width: 640px;
        overflow: hidden;
      }
      .tu img {
        width: 100%;
        display: block;
      }
      .banners{
          width: 100%;
          min-width: 320px;
          max-width: 640px;
          position: absolute;
          height: 3rem;
          left: 0;
          top: 0;
        //   transform: translateY(-100%);
          padding: 0.5rem 0.3rem;
          .b_left{
              float: left;
              img{
                  width:1.5rem;
                  display: block;
              }
          }
          .b_right{
              width: 100%;
              position: absolute;
              float: left;
              height: 1rem;
              p{
                  color: white;
                  font-size: 0.3rem;
                  height: 0.5rem;
                  margin-top: 0.2rem;
              }
              .ico{
                  height: 0.8rem;
                  padding-left: 1.6rem;
                  ul{
                      width: 1.8rem;
                      height: 100%;
                      li{
                        width: 0.5rem;
                        height:  0.5rem;
                        line-height:  0.5rem;
                        border-radius: 0.05rem;
                        background-color: red;
                        float: left;
                        margin-left: 0.1rem;
                      }
                  }
              }
              .arrs{
                  width: 1rem;
                  height: 1rem;
                  position: absolute;
                  right: 0.3rem;
                  top: -0.1rem;
                  color: white;
                  font-size: 0.8rem;
              }

          }

      }
      .nums {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 5px 0;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0.3);
        li {
          width: 33.33%;
          float: left;
          a {
            width: 100%;
            color: white;
          }
          p {
            text-align: center;
            font-size: 0.3rem;
          }
        }
        li:nth-of-type(2) {
          border-left: 0.01rem solid white;
          border-right: 0.01rem solid white;
        }
      }
      .navs {
        width: 100%;
        text-align: center;
        overflow: hidden;
        li {
          width: 33.33%;
          float: left;
          padding: 10px 0;
          font-size: 0.16rem;
          background-color: #fff;
          border-right: 1px solid silver;
          border-bottom: 1px solid silver;

          a {
            width: 100%;
            display: block;
            text-align: center;
            margin: 0 auto;
            > img {
              width: 0.6rem;
              display: inline-block;
            }
            p {
              width: 100%;
              text-align: center;
              color: #666;
            }
          }
        }
        li:nth-of-type(3n) {
          border-right: 0px;
        }
      }
    }
    main {
      width: 100%;
      margin-top: 0.1rem;
      overflow: hidden;
      img {
        width: 100%;
        display: block;
      }
    }
  }
  /* 底部 */
  footer {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    position: fixed;
    z-index: 999;
    bottom: 0;
    background-color: white;
    padding: 0.1rem 0;
    ul {
      width: 100%;
      text-align: center;
      overflow: hidden;
      li {
        width: 25%;
        float: left;
        a {
          display: block;
          width: 100%;
          color: rgb(159, 156, 156);
          font-size: 0.4rem;
          p {
            &:nth-of-type(2) {
              margin-top: 0.05rem;
              font-size: 0.18rem;
            }
          }
        }
      }
    }
  }
}
